<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行元素和块元素转变</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#d1{
				display: none;
			}
			div.c1{
				background-color: aqua;
				display: inline;
				height: 400px;
				width: 500px;
			}
			 
			p a{
				text-decoration: none;
				font-size: 50px;
				background-color: red;
				height: 200px;
				width: 400px;
				display: block;
				margin-top: 5px;
				text-align: center;
				line-height: 200px;
			}
			ul{
				list-style: none;
			}
			div.c2{
				background-color: bisque;
				max-width: 640px;
			}
			div.c2 ul{
				vertical-align: top;/*垂直方向上顶部对齐*/
				display: inline-block;
				width: 200px;
				height: 120px;
				border: 2px double green;
				
			}
		</style>
	</head>
	<body>
		<h1 id="d1">你好</h1>
		<div class="c1">
			aaaaaaaaaaaaa
		</div>
		<p>
			<a href="#">taobao</a>
			<a href="#">jd</a>
			<a href="#">baidu</a>
			<a href="#">oschina</a>
		</p>
		<div class="c2">
			<ul>
				<li>友情连接</li>
				<li>连接2</li>
				<li>连接1</li>
				<li>连接4</li>
			</ul>
			<ul>
				<li>退货流程</li>
				<li>1111</li>
				<li>2222</li>
				<li>333</li>
			</ul>
			<ul>
				<li>淘宝攻略</li>
				<li>选择搜索</li>
				<li>看中下单</li>
				<li>付款，等待发货</li>
				<li>收货确认</li>
			</ul>
		</div>
	</body>
</html>